<!-- 事件日志 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0;">
      <connsearch ref="connsearch" :formOptions="formOptions" @search="search" @reset="reset">
      </connsearch>
      <div class="tabclick">
        <div class="tabitem" @click="handleClick()">
          <span><i :class="tab ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></span>
        </div>
      </div>
      <el-row>
        <el-tabs type="border-card" v-if="tab" style="margin-top:16px;"  @tab-click="tabClick">
          <el-tab-pane label="按日统计趋势" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <barchart :chartData="barchartData" @barclick="echartsClick" title="按日统计趋势"/>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="按资产名称统计分析" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <piechart :chartData="pie3Data" @pieclick="echartsClick" title="按资产名称统计分析"/>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="按病毒类型统计分析" lazy>
            <el-col :xs="24" :sm="24" :lg="24">
              <piechart :chartData="pie4Data" @pieclick="echartsClick" title="按病毒类型统计分析"/>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 24 }" style="padding-right: 8px;margin:16px 0;">
        <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px">
          <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column label="资产名称" show-overflow-tooltip prop="DeviceName" width="180"  align="left">
            <template slot-scope="{row}">
              <span>{{ row.DeviceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="感染时间" show-overflow-tooltip prop="TransTime" width="160" align="left"></el-table-column>
          <el-table-column label="客户端ID" show-overflow-tooltip prop="ClientId" align="left"></el-table-column>
          <el-table-column label="客户端IP" show-overflow-tooltip prop="ClientIp" align="left"></el-table-column>
          <el-table-column label="病毒名称" show-overflow-tooltip prop="VirusName" align="left"></el-table-column>
          <el-table-column label="处理类型" show-overflow-tooltip prop="VirusProcessResult" width="140"  align="left">
            <template slot-scope="{row}">
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === -1">未发现，未修复</span>
              <span style="color:#67C23A"  v-show="row.VirusProcessResult === 0">成功，修复</span>
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === 1">通知，未修复</span>
              <span style="color:#E6A23C"  v-show="row.VirusProcessResult === 2">隔离</span>
              <span style="color:#E6A23C"  v-show="row.VirusProcessResult === 3">删除</span>
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === 4">失败，未修复</span>
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === 5">需要重启，未修复</span>
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === 6">归档，未修复</span>
              <span style="color:#F56C6C"  v-show="row.VirusProcessResult === 7">无法处理，未修复</span>
            </template>
          </el-table-column>
          <el-table-column label="病毒类型" show-overflow-tooltip prop="VirusType" align="left"></el-table-column>
          <el-table-column label="扫描类型" show-overflow-tooltip prop="ScanType" align="left">
            <template slot-scope="{row}">
              <span v-show="row.ScanType === -1">其他</span>
              <span v-show="row.ScanType === 0">观察</span>
              <span v-show="row.ScanType === 1">任务执行</span>
              <span v-show="row.ScanType === 2">命令</span>
              <span v-show="row.ScanType === 3">用户出发</span>
              <span v-show="row.ScanType === 4">邮件监控</span>
              <span v-show="row.ScanType === 5">u盘监控</span>
            </template>
          </el-table-column>
          <el-table-column label="病毒文件路径" show-overflow-tooltip prop="InfectedFileName" width="140"  align="left"></el-table-column>
          <el-table-column label="文件MD5" show-overflow-tooltip prop="MD5" align="left"></el-table-column>
          <el-table-column label="操作" align="left" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="changeMailGlobal(scope.row)">资产详情</el-button>
              <el-button size="mini" type="primary" @click="GetDetailKingVirusDevice(scope.row)">病毒详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          :current-page=pageNum
          :page-size=pageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape=false
      title="病毒详情"
      :visible.sync="VirusDialog"
      v-el-drag-dialog
      width="1000px">
        <el-descriptions class="margin-top" :column="2"  border>
          <el-descriptions-item label="从属部门">{{ VirusObj.Department }}</el-descriptions-item>
          <el-descriptions-item label="资产名称">{{ VirusObj.DeviceName }}</el-descriptions-item>
          <el-descriptions-item label="资产唯一编码">{{ VirusObj.DeviceID }}</el-descriptions-item>
          <el-descriptions-item label="客户端地址">{{ VirusObj.ClientIp }}</el-descriptions-item>
          <el-descriptions-item label="客户端ID">{{ VirusObj.ClientId }}</el-descriptions-item>
          <el-descriptions-item label="病毒名称">{{ VirusObj.VirusName }}</el-descriptions-item>
          <el-descriptions-item label="病毒类型">{{ VirusObj.VirusType }}</el-descriptions-item>
          <el-descriptions-item label="处理类型">
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === -1">未发现，未修复</span>
            <span style="color:#67C23A"  v-show="VirusObj.VirusProcessResult === 0">成功，修复</span>
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === 1">通知，未修复</span>
            <span style="color:#E6A23C"  v-show="VirusObj.VirusProcessResult === 2">隔离</span>
            <span style="color:#E6A23C"  v-show="VirusObj.VirusProcessResult === 3">删除</span>
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === 4">失败，未修复</span>
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === 5">需要重启，未修复</span>
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === 6">归档，未修复</span>
            <span style="color:#F56C6C"  v-show="VirusObj.VirusProcessResult === 7">无法处理，未修复</span>
          </el-descriptions-item>
          <el-descriptions-item label="处理类型">
            <span v-show="VirusObj.ScanType === -1">其他</span>
              <span v-show="VirusObj.ScanType === 0">观察</span>
              <span v-show="VirusObj.ScanType === 1">任务执行</span>
              <span v-show="VirusObj.ScanType === 2">命令</span>
              <span v-show="VirusObj.ScanType === 3">用户出发</span>
              <span v-show="VirusObj.ScanType === 4">邮件监控</span>
              <span v-show="VirusObj.ScanType === 5">u盘监控</span>
          </el-descriptions-item>
          <el-descriptions-item label="感染时间">{{ VirusObj.TransTime }}</el-descriptions-item>
          <el-descriptions-item label="文件MD5">{{ VirusObj.MD5 }}</el-descriptions-item>
          <el-descriptions-item label="病毒文件路径">{{ VirusObj.InfectedFileName }}</el-descriptions-item>
        </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="VirusDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog v-el-drag-dialog title="资产详情" :close-on-click-modal="false" :visible.sync="dialogTableVisible"  width="70%" top="5vh">
      <assetsInfo :Moder="Moder"></assetsInfo> 
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogTableVisible = false;">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import connsearch from "@/components/connSearch";
import barchart from "./components/barchart2.vue";
import piechart from "./components/piechart.vue";
import { parseTime } from "@/utils/index.js";
import { connrequest } from "@/api/firstPage.js"
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import assetsInfo from "@/components/assetsInfo"
export default {
  directives: { elDragDialog },
  components: { connsearch, barchart, piechart,assetsInfo },
  data() {
    let that = this
    return {
      activeName: "",
      tabTitle: '按日统计趋势',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tab: false,
      dialogTableVisible: false,
      VirusDialog: false,
      VirusObj: {},
      Moder: {},
      logList: [],
      barchartData: [],
      pie1Data: [],
      pie2Data: [],
      pie3Data: [],
      pie4Data: [],
      tableData:[],
      BaselineResultList: [],
      searchform:{},
      options:{},
      searchobj: {},
      formOptions: [
        {
          col: 8,
          hidden: false,
          label: "日期", // label文字
          prop: "timeRange", // 字段名
          initValue: [], // 字段初始值,
          element: "el-date-picker", // 指定elementui组件
          type: "", // 日期选择类型,
          events: {
            input(val) {
              that.searchform.timeRange = val
            },
          },
        },
        {
          col: 8,
          label: "资产选择",
          prop:"DeviceName",
          element: "el-select",
          initValue: "",
          placeholder: "请选择资产",
          options:[],
          events: {
            input(val) {
              that.searchform.DeviceName = val
            },
          },
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.pageSize = Cookies.get('DefaultPageLength') * 1
    let endTime = new Date(new Date().setHours(0, 0, 0, 0))
    let startTime = endTime - (Cookies.get('DefaultLogDays') * 1 * 3600 * 24 * 1000);
    let arr = [ parseTime(startTime), '']
    this.formOptions.map( item => {
      if(item.label === '日期'){
        item.initValue = arr
      }
    })
    this.$set(this.searchform,'timeRange', arr)
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.CenterGetDevice()
  },
  methods: {
    async CenterGetDevice(){
      const data = {
        Paging:{
          QueryPageNo: 1,
          QueryPageLength: 100000000
        },
        Filter:{
          Status: 0,
        }
      }
      const res = await connrequest('CenterGetDevice', data)
      let assetList = []
      res.Data.map(item => {
        assetList.push({ label: item.DeviceName, value: item.DeviceID })
      })
      this.formOptions.map( item => {
        if(item.label === '资产选择'){
          item.options = assetList
        }
      })
    },
    async changeMailGlobal(obj){
      const data = {
        Paging:{
          QueryPageNo: 1,
          QueryPageLength: 10000000000
        },
        Filter:{
          DeviceID: obj.DeviceID
        }
      }
      const res = await connrequest('CenterGetDevice', data)
      let arr = res.Data.filter(item => item.DeviceID === obj.DeviceID)
      let row = arr[0]
      const currentTimeStamp = new Date().getTime();
      this.Moder = {
        ...row,
        control:true
      }
      this.dialogTableVisible = true
    },
    findBaselineLabel(BlID) {
      const baselineItem = this.BaselineResultList.find(item => item.value === BlID);
      return baselineItem ? baselineItem.label : '';
    },
    findBaselineFixScheme(BlID) {
      const baselineItem = this.BaselineResultList.find(item => item.value === BlID);
      return baselineItem ? baselineItem.FixScheme : '';
    },
    // 获取所有数据
    getData(){
      this.GetEventLog()
      switch (this.tabTitle) {
        case '按日统计趋势':
          this.GetKingVirusLogSumGroupByDate()
          break;
        case '按资产名称统计分析':
          this.GetKingVirusLogSumGroupByDevice()
          break;
        default:
          this.GetKingVirusLogSumGroupByVirusType()
          break;
      }
    },
    echartsClick(val,title){
      this.pageNum = 1
      if(title === '按日统计趋势'){
        this.searchobj = { StartTime: `${val} 00:00:00`, EndTime: `${val} 23:59:59` }
        this.GetEventLog(this.searchobj)
      }else if(title === '按资产名称统计分析'){
        this.searchobj = { DeviceName: val }
        this.GetEventLog(this.searchobj)
      }else{
        this.searchobj = { VirusType: val }
        this.GetEventLog(this.searchobj)
      }
      // this.GetEventLog()
    },
    tabClick(row){
      this.tabTitle = row.label
      switch (row.label) {
        case '按日统计趋势':
          this.GetKingVirusLogSumGroupByDate()
          break;
        case '按资产名称统计分析':
          this.GetKingVirusLogSumGroupByDevice()
          break;
        default:
          this.GetKingVirusLogSumGroupByVirusType()
          break;
      }
    },
    // 获取事件日志列表
    async GetEventLog(searchobj = {}){
      const data = {
        Paging: {
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          DeviceID: this.searchform.DeviceName,
          VirusType: this.searchform.DeviceName,
          ...searchobj
        }
      }
      const res = await connrequest('GetKingVirusLog', data)
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        return item
      })
      this.tableData = res.Data
      this.total = res.Paging?.TotalCount
    },
    // 获取事件日期统计
    async GetKingVirusLogSumGroupByDate(){
      let xAxis = []
      let series= []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          DeviceID: this.searchform.DeviceName,
          VirusType: this.searchform.DeviceName,
        }
      }
      const res = await connrequest('GetKingVirusLogSumGroupByDate', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        xAxis.push(item.Name)
        series.push(item.Count)
      })
      this.barchartData = {xAxis,series}
    },
    // 按事件资产统计分析
    async GetKingVirusLogSumGroupByDevice(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          DeviceID: this.searchform.DeviceName,
          VirusType: this.searchform.DeviceName,
        }
      }
      const res = await connrequest('GetKingVirusLogSumGroupByDevice', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        arr.push({name: item.Name, value: item.Count})
      })
      this.pie3Data = arr
    },
    // 按病毒类型
    async GetKingVirusLogSumGroupByVirusType(){
      let arr = []
      const data = {
        Filter:{
          StartTime: this.searchform.timeRange?.[0] ||  '',
          EndTime: this.searchform.timeRange?.[1] || '',
          DeviceID: this.searchform.DeviceName,
          VirusType: this.searchform.DeviceName,
        }
      }
      const res = await connrequest('GetKingVirusLogSumGroupByVirusType', data)
      res.Data = res.Data || []
      res.Data.map( item =>{
        arr.push({name: item.Name, value: item.Count})
      })
      this.pie4Data = arr
    },
    async GetDetailKingVirusDevice(row){
      // const data = {
      //   Filter: {
      //     ClientId: row.ClientId
      //   }
      // }
      // const res = await connrequest('GetDetailKingVirusDevice', data)
      this.VirusObj = {...row, TransTime: row.TransTime === 0 ? '未扫描完成' : parseTime(row.TransTime)}
      this.VirusDialog = true
    },
    // 搜索
    search(val) {
      this.pageNum = 1
      this.searchobj = {}
      this.searchform = {...val}
      if(this.searchform.timeRange){
        this.searchobj = { StartTime: this.searchform?.timeRange[0] || '', EndTime: this.searchform?.timeRange[1] || '' }
      }
      this.getData()
    },
    // 重置
    reset(){
      let xTime = new Date().getTime()
      let endTime = new Date(new Date().setHours(0, 0, 0, 0))
      let startTime = endTime - (Cookies.get('DefaultLogDays') * 1 * 3600 * 24 * 1000);
      // let arr = [ parseTime(startTime), parseTime(xTime)]
      let arr = [ parseTime(startTime), '']
      this.pageNum = 1
      this.formOptions = this.formOptions.map( item => {
        if(item.label === "日期"){
          item.initValue = arr
        }else if(item.label === "状态检测" || item.label === "检测项目"){
          item.initValue = ''
        }else{
          item.initValue = ""
        }
        return item
      })
      this.searchform = {}
      this.$set(this.searchform,'timeRange', arr)
      this.$set(this.searchform,'NeedFix', 0)
      this.$refs.connsearch.addInitValue()
      this.getData()
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.pageNum = 1
      this.GetEventLog({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
  handleCurrentChange( pageNum ){
      this.pageNum = pageNum
      this.GetEventLog({...this.searchobj, StartTime: this.searchobj?.StartTime || this.searchform.timeRange?.[0] ||  '', EndTime: this.searchobj?.EndTime || this.searchform.timeRange?.[1] ||  ''})
    },
    handleClick() {
      this.tab = !this.tab
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./components/css/conncss.scss";
::v-deep .el-descriptions-item__label.is-bordered-label{
  width: 200px;
}
</style>